<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">出差申请</block>
		</cu-custom>
		<u-tabs style="background: #fff;position: sticky;" :list="list" :scrollable="false" :current="current"
			@change="change" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
            color: '#303133',
            fontWeight: '700',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }"></u-tabs>
		<!-- 新增 -->
		<view v-if="current === 0">
			<u--form :model="form" class="apply-form-field">
				<u-gap height="20" bg-color="#f5f5f5"></u-gap>
				<u-form-item label="开始时间" label-width="120" @click="beginTimeShow = true;">
					<u-datetime-picker :show="beginTimeShow" v-model="form.beginTime" mode="date" 
						@confirm="confirm" @cancel="cancel" @close="close"></u-datetime-picker>
				</u-form-item>



				<u-form-item label="其他用章说明" label-width="120">
					<u--textarea placeholder="请填写其他用章说明" v-model="form.remark" maxlength="500" count></u--textarea>
				</u-form-item>

				<u-form-item label="用章事由" label-width="120">
					<u--textarea placeholder="请填写用章事由" v-model="form.remark" maxlength="500" count></u--textarea>
				</u-form-item>

				<u-form-item label="项目选择" label-width="120">
					<u--text type="primary" :text="proInfo.name" suffixIcon="search"
						@click="selectOpenPro('pro')"></u--text>
				</u-form-item>



			</u--form>
			<u-row gutter="32" class="bottom-box subBtn accept" justify="center"
				style="bottom: 40rpx;margin-left: 0px;">
				<u-col span="5">
					<view><u-button type="primary" shape="circle" @click="save()">保存</u-button>
					</view>
				</u-col>
				<u-col span="5">
					<view><u-button :plain="true" type="error" shape="circle" @click="submit()">提交并启动审批</u-button>
					</view>
				</u-col>
			</u-row>

			<!-- <u-row gutter="32" class="bottom-box" justify="center" style="bottom: 40rpx;margin-left: 0px;">
				<u-col span="10">
					<view><u-button type="primary" shape="circle" @click="navTo('/pages/home/index')"></u-button>
					</view>
				</u-col>
			</u-row> -->
		</view>
		<!--查看 -->
		<view v-if="current === 1">
			<view class="search">
				<u-search v-model="keywords" @custom="search" @search="search"></u-search>
			</view>
			<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;font-size: 30rpx;">
						<image class="user-images" src="/static/aidex/images/user06.png"></image>李毅的请假申请
					</view>
					<view style="color: #999999;font-size: 22rpx;">2021年10月24日</view>
				</view>
				<view class="" slot="body">
					<u-row gutter="16">
						<u-col span="12">
							<view class="apply-text"><span>假期类型：</span>年假</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>开始时间：</span>2021年10月25日14:30</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>结束时间：</span>2021年10月27日14:30</view>
						</u-col>
					</u-row>
				</view>
				<view class="apply-list-foot" slot="foot" style="text-align: right;color: #58ca93;">
					审批通过
				</view>
			</u-card>
			<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;font-size: 30rpx;">
						<image class="user-images" src="/static/aidex/images/user06.png"></image>李毅的请假申请
					</view>
					<view style="color: #999999;font-size: 22rpx;">2021年10月24日</view>
				</view>
				<view class="" slot="body">
					<u-row gutter="16">
						<u-col span="12">
							<view class="apply-text"><span>假期类型：</span>年假</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>开始时间：</span>2021年10月25日14:30</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>结束时间：</span>2021年10月27日14:30</view>
						</u-col>
					</u-row>
				</view>
				<view class="apply-list-foot" slot="foot" style="text-align: right;color: #58ca93;">
					审批通过
				</view>
			</u-card>
			<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
				<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;font-size: 30rpx;">
						<image class="user-images" src="/static/aidex/images/user06.png"></image>李毅的请假申请
					</view>
					<view style="color: #999999;font-size: 22rpx;">2021年10月24日</view>
				</view>
				<view class="" slot="body">
					<u-row gutter="16">
						<u-col span="12">
							<view class="apply-text"><span>假期类型：</span>年假</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>开始时间：</span>2021年10月25日14:30</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>结束时间：</span>2021年10月27日14:30</view>
						</u-col>
					</u-row>
				</view>
				<view class="apply-list-foot" slot="foot" style="text-align: right;color: #f28c03;">
					待审核
				</view>
			</u-card>
		</view>



	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				list: [{
					name: '发起申请'
				}, {
					name: '查看数据',
				}],

				beginTimeShow: false,
				form: {
					beginTime: Number(new Date())
				},

				proInfo: {
					id: '',
					name: '',
					number: '',
				},
				m2mSimflowList: [],
				m2mOrderFlowList: [],
				current: 0,
				status: 'loadmore',
				iconType: 'circle',
				isDot: false,
				loadText: {
					loadmore: '点击加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
			}
		},
		created() {},
		methods: {

			close() {
				this.beginTimeShow = false
			},
			cancel() {
				this.beginTimeShow = false
			},
			confirm(e) {
				this.beginTimeShow = false
				console.log("dfdsfdf",e)
				this.form.beginTime = Number(e.value)
console.log("this.form.beginTime ",this.form.beginTime,Number(new Date()) )
			},

			change(item) {
				this.current = item.index;
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			selectOpenPro(type) {
				uni.hideKeyboard();
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
				let that = this;

				uni.navigateTo({
					url: '/pages/workbench/SelectInfo',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						selectInformationResult: function(data) {
							that[type] = {
								name: data.data.name,
								id: data.data.id,
								number: data.data.code
							};
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('selectInformation', {
							data: type,
						});
					}
				});
			},
		}

	}
</script>
<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 48px;
			height: 48px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}
</style>